<template>
  <el-card
    class="env-status work-bench-team__card"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 20px); padding: 10px 15px;"
  >
    <div class="env-status__header work-bench-team__card__header">
      <span class="work-bench-team__card__title env-status__title">环境状态</span>
    </div>
    <div class="work-bench-team__card__body env-status__body">
      <div class="env-status__item">
        <div class="env-status__item--header">
          <img :src="img_temperature" />
          <span>温度</span>
        </div>
        <div class="env-status__item--body env-status__item--body--1">
          <div class="env-status__item__value env-status__item__value--1">
            <span>{{ temperature.value }}</span>
            <span class="env-status__item__value__unit">℃</span>
          </div>
        </div>
        <div class="env-status__item--footer">
          <span class="env-status__item__range-1">{{ temperature.min }}℃</span>
          <span class="env-status__item__range-2">{{ temperature.max }}℃</span>
        </div>
      </div>
      <div class="env-status__item">
        <div class="env-status__item--header">
          <img :src="img_humidity" />
          <span>湿度</span>
        </div>
        <div class="env-status__item--body env-status__item--body--2">
          <div class="env-status__item__value env-status__item__value--2">
            <span>{{ humidity.value }}</span>
            <span class="env-status__item__value__unit">%RH</span>
          </div>
        </div>
        <div class="env-status__item--footer">
          <span class="env-status__item__range-1">{{ humidity.min }}%RH</span>
          <span class="env-status__item__range-2">{{ humidity.max }}%RH</span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //
import dashboardTeamApi from '@admin/views/Workbench/WorkbenchTeam/api'
import img_temperature from '../img/temperature.png'
import img_humidity from '../img/humidity.png'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'EnvStatus',

  data() {
    return {
      img_temperature,
      img_humidity,
      /**
       * 温度
       */
      temperature: {
        value: 0,
        min: 0,
        max: 0,
      },
      /**
       * 湿度
       */
      humidity: {
        value: 0,
        min: 0,
        max: 0,
      },
    }
  },

  props: {
    /**
     * 班组ID
     */
    teamId: { type: String, default: '' },
  },

  mounted() {
    this.$nextTick(() => {
      dashboardTeamApi.queryTeamEnvironmentPie({
        teamId: this.teamId,
        tenantNo: 0,
      }).then((res) => {
        const temperature = (res.info || []).filter((i) => {
          return i.head[0].name === 'temperature'
        })[0] || {}
        const humidity = (res.info || []).filter((i) => {
          return i.head[0].name === 'humidity'
        })[0] || {}
        this.temperature.value = ((temperature.head || [])[0] || {}).value
        this.temperature.min = (temperature.info || []).filter((i) => i.name === 'temperatureSmall')[0].value
        this.temperature.max = (temperature.info || []).filter((i) => i.name === 'temperatureBig')[0].value
        this.humidity.value = ((humidity.head || [])[0] || {}).value
        this.humidity.min = (humidity.info || []).filter((i) => i.name === 'humiditySmall')[0].value
        this.humidity.max = (humidity.info || []).filter((i) => i.name === 'humidityBig')[0].value
      })
    })
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
